<template>
  <div class="main">
    <div class="u-title">
      <h3>
          <span class="f-ff2">
            <p class="fp-13">粉丝</p>
            <p>（{{ searchParams.total }}）</p>
          </span>
      </h3>
    </div>
    <div class="n-nmusic" v-if="searchParams.total ==0">
      <h3 class="f-ff2">
        <i class="icon"></i>
        还没有粉丝
      </h3>
    </div>
    <ul class="m-fans" v-else>
      <li v-for="(item,index) in fans" :key="index">
        <router-link :to="{name:'UserDetailView',params:{id:item.userId,type:1}}" class="ava" :title="item.nickname">
          <img v-lazy="item.avatarUrl" alt="">
          <i class="icon-1"></i>
        </router-link>
        <div class="info">
          <p>
            <router-link :to="{name:'UserDetailView',params:{id:item.userId,type:1}}" class="nm" :title="item.nickname">
              {{ item.nickname }}
            </router-link>
            <i class="sex" :class="item.gender==1?'man':'women'"></i>
          </p>
          <p>
            <router-link :to="{name:'Event',query:{id:item.userId}}">
              动态
              <em>{{ item.eventCount }}</em>
            </router-link>
            <span class="line">|</span>
            <router-link :to="{name:'Follows',query:{id:item.userId}}">
              关注
              <em>{{ item.follows }}</em>
            </router-link>
            <span class="line">|</span>
            <router-link :to="{name:'Fans',query:{id:item.userId}}">
              粉丝
              <em>{{ item.followeds }}</em>
            </router-link>
          </p>
          <p class="s-wq"></p>
        </div>
        <div class="oper">
          <a href="javascript:;">
            关注
          </a>
        </div>
      </li>
    </ul>
    <Pagination :pageNo='searchParams.pageNo' :pageSize='searchParams.pageSize' :total='searchParams.total'
                :continues='9' @getPageNo="getPageNo"></Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  name: "index",
  components: {
    Pagination
  },
  data() {
    return {
      fans: [],
      searchParams: {
        total: '',
        pageSize: 20,
        pageNo: 1,
      },
    }
  },
  methods: {
    getPageNo(pageNo) {
      this.searchParams.pageNo = pageNo
      this.getFans()
    },
    async getFans() {
      let result = await this.$API.reqFans(this.$route.query.id, this.searchParams.pageSize, (this.searchParams.pageNo - 1) * (this.searchParams.pageSize))
      this.searchParams.total = result.data.size
      this.fans = result.data.followeds
    },
  },
  mounted() {
    this.getFans()
  }
}
</script>

<style scoped lang="less">
.main {
  width: 900px;
  height: auto;
  overflow: hidden;
  margin: 0 auto;

  .u-title {
    width: 900px;
    height: 33px;
    margin: 0 auto;
    position: relative;
    border-bottom: 2px solid #c20c0c;

    h3 {
      line-height: 28px;
      float: left;
      font-size: 20px;
      font-weight: normal;

      .f-ff2 {

        display: inline-block;
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

        p {
          float: left;
        }

        .fp-13 {
          position: relative;
          margin-right: 10px;
        }
      }
    }
  }
  .n-nmusic {
    padding: 105px 0 105px 0;
    text-align: center;

    .f-ff2 {
      font-weight: normal;
      padding-bottom: 38px;
      font-size: 18px;
      margin-top: -2px;

      .icon {
        margin-right: 17px;
        width: 64px;
        height: 50px;
        background-position: 0 -347px;
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
        background-image: url("../../../assets/icon.png");
      }
    }
  }
  .m-fans {
    border-left: 1px solid #d5d5d5;
    width: 900px;
    height: auto;
    overflow: hidden;
    padding-bottom: 40px;

    li {
      float: left;
      width: 449px;
      height: 80px;
      padding: 20px 20px 0 20px;
      border-right: 1px solid #d5d5d5;

      .ava {
        float: left;
        width: 60px;
        height: 60px;
        position: relative;
        zoom: 1;

        img {
          float: left;
          width: 60px;
          height: 60px;
        }

        .icon-1 {
          position: absolute;
          top: -4px;
          right: -4px;
          background-image: url("../../../assets/dot2.png");
        }
      }

      .info {
        float: left;
        width: 255px;
        margin-left: 10px;

        p {
          margin-bottom: 6px;

          a {
            color: #333;
          }

          .nm {
            display: inline-block;
            *display: inline;
            zoom: 1;
            max-width: 235px;
            vertical-align: middle;
            color: #0c73c2 !important;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            font-size: 14px;
          }

          .sex {
            margin: 1px 0 0 2px;
            margin-left: 2px;
            width: 14px;
            height: 15px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-image: url("../../../assets/icon.png");
          }

          .women {
            background-position: -70px 0;
          }

          .man {

            background-position: -70px -20px;
          }

          em {
            color: #0c73c2;
          }

          .line {
            margin: 0 8px;
            color: #999;
          }
        }
      }

      .oper {
        float: right;
        width: 75px;
        padding-top: 5px;

        a {
          display: inline-block;
          background-image: url("../../../assets/button.png");
          width: 40px;
          height: 31px;
          padding-left: 30px;
          background-position: 0 -720px;
          color: #fff;
          line-height: 30px;
        }
      }
    }
  }
}
</style>